<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. readyState   ==> 请求状态码  ， xhr的状态 
        // 0  表示请求未初始化，还没有调用 open()
        // 1  表示服务器已建立 但是还没有 调用send()
        // 2  请求已接收， 正在处理中
        // 3  请求处理中  已经有部分数据响应了，没有全部完成
        // 4  请求已完成 （全部数据已经下载完了）

        // 2. status http状态码
        // 100 200 300
        // 表示请求成功的http状态码  200-299
        //  ==> Ajax
        //  xhr.status >= 200 && xhr.status < 300 || xhr.status === 304

        const xhr = new XMLHttpRequest()
        console.log(xhr.readyState) // 0 

        const url = `http://ajax-api.itheima.net/api/news`

        xhr.open('GET', url)
        console.log(xhr.readyState)  // 1 

        xhr.send()

        xhr.addEventListener('readystatechange', () => {
            console.log(xhr.readyState)  // 2  3  4 

            // 2 send() 方法已经调用
            // 3 下载中
            // 4 下载完成
        })
    </script>
</body>

</html>